<template>
  <div class="Con">
   <div class="Con-H">
     <el-button type="danger" icon="el-icon-delete" size="small" class="but1" @click="deleteData()">删除所有数据</el-button>

     <div class="Con-H-L">
       <el-date-picker
        v-model="mydata"
        type="date"
        size="small"
        placeholder="选择日期"
         format="yyyy 年 MM 月 dd 日"
         value-format="yyyy-M-d"
        class="mydata">
    </el-date-picker>
     <el-button type="primary" icon="el-icon-search" size="small" @click="search()">搜索</el-button>
     </div>

   </div>

   <div class="Con-C">
     <el-table
      :data="tableData"
      height="100%"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
          sortable
       >
      </el-table-column>
      <el-table-column
        prop="morning"
        label="早上负责人"
        >
      </el-table-column>
      <el-table-column
        prop="afternoon"
        label="中午负责人">
      </el-table-column>
      <el-table-column
        prop="evening"
        label="晚上负责人">
      </el-table-column>
    </el-table>
   </div>

   <div class="Con-B
   ">
      <el-pagination
        background
        layout="total,prev, pager, next,jumper"
        :total="total"
        :page-size="pageSize"
        :current-page.sync="pageNum"
        @current-change="changePage"
      >
      </el-pagination>
   </div>
    
  </div>
</template>

<script>
import { axios1 } from '@/network'
import Qs from "qs";

export default {
    data(){
      return{
        mydata:'',//选择的日期
        tableData:[],//表格数据
        pageNum:1,
        pageSize:12,
        total:null
         
      }
    },
    methods:{
      search(){//查询
        let data1={
          pageNum:this.pageNum,
          pageSize:this.pageSize,
          date:this.mydata
        }
        axios1({
          url:'/administrator/page',
           method:'post',
            headers:{
           "Content-Type": "application/x-www-form-urlencoded ",
            token: this.$store.state.token,
           },
           data: Qs.stringify(data1)
            }).then((res)=>{
              this.tableData=res.data.data.data
              this.total=res.data.data.total
               this.$message({
               message: '查询成功！',
               duration:1000,
               type: 'success'
               });
              // console.log(res)
        }).catch((res)=>{
          alert(res)
        })
      },
      AllData(){
        //获取所有数据
        let data1={
          pageNum:this.pageNum,
          pageSize:this.pageSize,
          date:this.mydata
        }
        axios1({
          url:'/administrator/page',
           method:'post',
            headers:{
           "Content-Type": "application/x-www-form-urlencoded ",
            token: this.$store.state.token,
           },
           data: Qs.stringify(data1)
            }).then((res)=>{
              this.tableData=res.data.data.data
              this.total=res.data.data.total
              // console.log(res)
        }).catch((res)=>{
          alert(res)
        })

      },
      changePage(){//分页
        this.AllData()
      },
      deleteAll(){
         axios1({
          url:'/administrator/deleteTotal',
          method:'post',
           headers:{
             token: this.$store.state.token,
           },

         }).then((res)=>{
           
         }).catch(()=>{
          alert("删除失败！！")
         })
      },
      deleteData(){//删除的点击事件
         this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
         this.deleteAll();
          alert("删除成功！！")
         location.reload()
         
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
             duration:1600,
          });          
        });
      }
    },
    created(){
      this.AllData();//获取所有数据
    }
}
</script>

<style scoped>
div{
  box-sizing: border-box;
}
 .Con{
  width: 98%;
  height: 98%;
  margin: auto;
  box-shadow: 1px 1px 10px rgb(82, 81, 81);
  margin-top: 1%;
 
 }
 .Con-H {
  width: 100%;
  height: 10%;
 
   display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgb(204, 202, 202);
 }
.Con-C{
  width: 100%;
  height: 80%;
  
}
.Con-B{
  width: 100%;
  height: 10%;
  padding-top: 10px;
}
.but1{
  font-weight: 600;
  margin-left: 10px;

}
.mydata{
  margin-right: 10px;
}
.Con-H-L{


 padding-right: 10px;
}

 
</style>